import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons'
import logo from 'assets/logo.png'
import styles from './index.module.scss'
import { useEffect, useState } from 'react'
import { code, login } from 'api/login'
import { StateType } from 'api/contents/LoginType'
import { FC } from 'react'
import { useHistory } from 'react-router-dom'
import { resolveBase64 } from 'utils/index'
import { setToken } from 'utils/Storage'

const Login: FC = () => {
  const [state, setState] = useState<StateType>()
  const history = useHistory()

  useEffect(() => {
    getCode()

  }, [])

  //发送请求获取验证码
  const getCode = async () => {

    const res: any = await code()
    setState(res)
  }
  //重新获取图片
  const againRes = () => {
    getCode()
  }

  const onSave = async (values: any) => {
    try {
      const res: any = await login({
        ...values,
        password: values.password,
        uuid: state?.uuid,
      })
      setToken(res.token)
      history.push('/home')
      message.success('登录成功')
    } catch (error) {
      message.error('登陆失败，请重新尝试')
    }
  }

  return (
    <div className={styles.login}>
      <div className="login_box">
        <img
          src="http://liufusong.top/huike/static/img/login-l.cb39a31f.png"
          alt=""
          className="login_left_img"
        />
        <Form
          size="middle"
          name="normal_login"
          className="login-form"
          initialValues={{ username: 'admin', password: '123456' }}
          onFinish={onSave}
        >
          <div className="login_form_title">
            <img src={logo} alt="" style={{ width: 33, height: 36 }} />
            <span className="title_label">汇客CRM系统</span>
          </div>
          <Form.Item name="username">
            <Input
              bordered={false}
              prefix={<UserOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item name="password">
            <Input
              type="password"
              bordered={false}
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, message: '请输入验证码' }]}
          >
            <div style={{ display: 'flex' }}>
              <Input
                bordered={false}
                prefix={<SafetyOutlined className="site-form-item-icon" />}
                placeholder="验证码"
                style={{ width: '50%' }}
              />
              <div style={{ width: '50%' }}>
                {state?.img ? (
                  <img
                    className="code_img"
                    src={resolveBase64(state?.img)}
                    onClick={againRes}
                    alt=""
                  />
                ) : null}
              </div>
            </div>
          </Form.Item>
          <Form.Item style={{ border: 'none' }}>
            <Button
              type="primary"
              htmlType="submit"
              block
              shape="round"
              style={{ backgroundColor: '#05cc95', border: 'none' }}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
